<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="counter += 1">Add 1</button>
    <p>This button has been clicked {{counter}} times.</p>
</div>
<div id="app-2">
    <button v-on:click="greet">Greet</button>
</div>
<div id="app-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>
<div id="app-4">
    <!--阻止单击事件继续传播-->
    <a v-on:click.stop="doThis">click.stop</a>

    <!--提交事件不再重载页面-->
    <form v-on:submit.prevent="onSubmit">submit.prevent</form>

    <!--修饰符可以串联-->
    <a v-on:click.stop.prevent="doThat">stop.prevent</a>

    <!--只有修饰符-->
    <form v-on:submit.prevent>submit.prevent</form>

    <!--添加事件监听器时使用事件捕获模式-->
    <!--即内部元素触发的事件先在此处理,然后才交由内部元素进行处理-->
    <div v-on:click.capture="doThis">click.capture</div>

    <!--只当在event.target是当前元素自身时触发处理函数-->
    <!--即事件不是从内部元素触发的-->
    <div v-on:click.self="doThat">click.self</div>
</div>
<!--点击事件只会触发一次-->
<div id="app-5">
    <a v-on:click.once="doThis">click.once</a>
</div>
<div id="app-6">
    <!--滚动事件的默认行为(即滚动行为)将会立即触发-->
    <!--而不会等待`onScroll`完成-->
    <!--这其中包含`event.preventDefault()`的情况-->
    <div v-on:scroll.passive="onScroll">...</div>
</div>

<!--按键修饰符-->
<div id="app-7">
    <!--只有在key时Enter时调用vm.submit-->
    <input v-on:keyup.enter="submit"/>
    <input v-on:keyup.page-down="onPageDown">
</div>
<!--按键码已废弃-->
<div id="app-8">
</div>
<!--系统修饰键-->
<!--.ctrl-->
<!--.alt-->
<!--.shift-->
<!--.meta-->
<div id="app-9">
    <!--Alt+C-->
    <input @keyup.alt.67="clear">
    <div @click.ctrl="doSomething">Do something</div>
</div>
<!--.exact修饰符-->
<!--即使Alt或Shift被一同按下时也会触发-->
<button @click.ctrl="onClick">A</button>
<!--有且只有Ctrl被按下的时候才触发-->
<button @click.ctrl.exact="onCtrlClick">A</button>
<button @click.exact></button>
<script>
    var app7 = new Vue({
        el: '#app-7',
        methods: {
            submit: function () {

            },
            onPageDown: function () {

            }
        }
    });
    var app4 = new Vue({
        el: '#app-4',
        methods: {
            doThis: function () {
                alert('doThis')
            },
            onSubmit: function () {
                alert('onSubmit')
            },
            doThat: function () {
                alert('doThat')
            },
            doThat: function () {
                alert('doThis')
            }
        }
    });
    var app3 = new Vue({
        el: '#app-3',
        methods: {
            say: function (message) {
                alert(message);
            }
        }
    });
    var app2 = new Vue({
        el: '#app-2',
        data: {
            name: 'Vue.js'
        },
        methods: {
            greet: function (event) {
                alert('Hello ' + this.name + '!')
                //event是原生dom事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    });
</script>

</body>
</html>